<template>
  <el-form :model="alipayBean">
    <el-form-item label="订单号" :label-width="formLabelWidth">
      <el-input v-model="alipayBean.out_trade_no" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="商品名" :label-width="formLabelWidth">
      <el-input type="text" v-model="alipayBean.subject" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="价格" :label-width="formLabelWidth">
      <el-input v-model="alipayBean.total_amount" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="描述" :label-width="formLabelWidth">
      <el-input v-model="alipayBean.body" autocomplete="off"></el-input>
     </el-form-item>
    <el-form-item  :label-width="formLabelWidth">
      <el-button @click="payMoney">支付</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import request from "@/config/request";

export default {
  name: "pay",
  data() {
    return {
      alipayBean: {
        out_trade_no: "",
        subject: "",
        total_amount: 3,
        body: ""

      }
    }
  },
  methods: {
    payMoney() {
      request.post('/api/order/alipay', this.alipayBean).then(resp => {
        // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
        const divForm = document.getElementsByTagName('div')
        console.log("支付回调"+divForm)
        console.log(resp)
        if (divForm.length) {
          document.body.removeChild(divForm[0])
        }
        const div = document.createElement('div')

        div.innerHTML = resp // data就是接口返回的form 表单字符串
        document.body.appendChild(div)
        document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
        document.forms[0].submit()
      })

    }

  }
}
</script>

<style scoped>

</style>